@import "../../../styles/variables";

#taskManager {
    position: fixed;
    right: 0;
    top: 5rem;
    z-index: 1001;
    background: transparentize($dark-grey, .05);
    color: white;
    text-align: left;
    padding: 0.75rem;
    font-size: $secondary-font-size;
    width: 9rem;
    border-radius: 0.25rem;

    &.open {
        width: 26rem;
    }
}

/** Circular Gauge for overview **/
.gauge {
    display: inline-block;
    width: 100px;
    height: 100px;
    border: 1px solid #AAA;
    border-radius: 666em;
    position: relative;
  }
  .gauge::before, .gauge::after {
    content: '';
    position: absolute;
    top: 0; bottom:0;
    left: 0; right: 0;
    border: 0.25rem solid $secondary-color;
    border-radius: 666em;
    display: none;
  }
  .gauge::before{
    clip: rect(0, 100px, 100px, 50px);
  }
  .gauge::after{
    clip: rect(0, 50px, 100px, 0);
  }
  .gauge[data-fill="25"]::before,
  .gauge[data-fill="50"]::before,
  .gauge[data-fill="75"]::before,
  .gauge[data-fill="100"]::before {
    display: block
  }
  .gauge[data-fill="25"]::before {
    clip: rect(0, 100px, 50px, 50px);
  }

  .gauge[data-fill="75"]::after,
  .gauge[data-fill="100"]::after { display: block}

  .gauge[data-fill="75"]::after {
    clip: rect(50px, 50px, 100px, 0); }

  .gauge-enhanced {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #AAA;
    border-radius: 666em;
    position: relative;
    background: white;
  }
  .gauge-enhanced::before, .gauge-enhanced::after {
    content: '';
    position: absolute;
    top: 0; bottom:0;
    left: 0; right: 0;
    border: 0.25rem solid $secondary-color;
    border-radius: 666em;
  }
  .gauge-enhanced::before{
    clip: rect(0, 80px, 80px, 40px);
  }
  .gauge-enhanced::after{
    clip: rect(0, 40px, 80px, 0);
    border-color:white;
    background: white;
  }
  .gauge-enhanced[data-fill="0"]::before{transform: rotate(-180deg)}
  .gauge-enhanced[data-fill="25"]::before{transform: rotate(-90deg)}
  /*180 - 180*(0.33*2)*/
  .gauge-enhanced[data-fill="33"]::before{transform: rotate(-61.2deg)}
  .gauge-enhanced[data-fill="50"]::before{transform: rotate(0deg)}

  .gauge-enhanced[data-fill="66"]::after,
  .gauge-enhanced[data-fill="75"]::after,
  .gauge-enhanced[data-fill="100"]::after{ border-color: #AAA }

  /*180*(0.33*2)*/
  .gauge-enhanced[data-fill="66"]::after{transform: rotate(-118.8deg)}
  .gauge-enhanced[data-fill="75"]::after{transform: rotate(-90deg)}

  /*h2:nth-of-type(1), section:nth-of-type(1), h2:nth-of-type(2), section:nth-of-type(2) {
  display: none;
  }*/

  .gauge-markup {
    width: 5em; height: 5em;
    display: inline-block;
    background: transparent;
    position: relative;
    border: 1px solid #AAA;
    text-indent: -999em;
    margin: .5em;
  }

  .gauge-markup::before {
    content: attr(data-display);
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-indent: 0;
  }

  .gauge-markup,
  .gauge-markup span,
  .gauge-markup span::before,
  .gauge-markup span::after {
    border-radius: 10em;
  }

  .gauge-markup span,
  .gauge-markup span::before,
  .gauge-markup span::after {
    box-sizing: border-box;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
  }

  /* Container clipping handling */
  .gauge-markup[data-fill^="6"] span,
  .gauge-markup[data-fill^="7"] span,
  .gauge-markup[data-fill^="8"] span,
  .gauge-markup[data-fill^="9"] span,
  .gauge-markup[data-fill^="10"] span{ clip: rect(auto,auto,auto,auto)}

  .gauge-markup span,
  .gauge-markup[data-fill="6"] span,
  .gauge-markup[data-fill="7"] span,
  .gauge-markup[data-fill="8"] span,
  .gauge-markup[data-fill="9"] span,
  .gauge-markup[data-fill="10"] span {
    clip: rect(0, 5em, 5em, 2.5em);
  }

  .gauge-markup span::before,
  .gauge-markup span::after {
    border: 0.25em solid $secondary-color;
    content: '';
    clip: rect(0, 2.5em, 5em, 0);
  }
  .gauge-markup span::before {
    transform: rotate(180deg);
  }

  /* All the values can be computed by a css pre processor loop */
  .gauge-markup[data-fill="0"]  span::before{transform: rotate(0deg)}
  .gauge-markup[data-fill="6"]  span::before{transform: rotate(10.8deg)}
  .gauge-markup[data-fill="25"] span::before{transform: rotate(90deg)}
  .gauge-markup[data-fill="33"] span::before{transform: rotate(151.2deg)}
  .gauge-markup[data-fill="50"] span::before{transform: rotate(180deg)}

  .gauge-markup[data-fill="66"] span::after{transform: rotate(-118.8deg)}
  .gauge-markup[data-fill="75"] span::after{transform: rotate(-90deg)}